<template>
  <div>
    <!-- v-model="message"是下面的语法糖 -->
    <!-- <child :modelValue="message" @update:modelValue="message=$event"></child> -->
    <child v-model="message" v-model:title="title"></child>
    {{ message }}
    {{ title }}
    <div class="color" @click="styleClass.color = 'green'">1111</div>
    <button class="btn" @click="color = 'green'">按钮</button>
    <br />
    <input type="text" v-model="iptValue" />
    <br />
    <!-- .lazy对input有用，对el-input没用 -->
    <input type="text" v-model.lazy="iptValue" />
    <el-input v-model="iptValue" placeholder="Please input" />
    <el-input v-model.lazy="iptValue" placeholder="Please input" />
    {{ iptValue }}
    <br />
    <!-- iptage会变成string类型 -->
    <!-- <el-input type="number" v-model="iptage" /> -->
    <br />
    <!-- iptage依旧是number类型 -->
    <el-input type="number" v-model.number="iptage" />
    <h2>{{ iptage }}--{{ typeof iptage }}</h2>
  </div>
</template>

<script setup>
import child from "./child.vue";
import { ref, reactive, watchEffect } from "vue";
const iptValue = ref(2222);
const iptage = ref(111);
const message = ref("hellow");
const title = ref("title");
const color = ref("red");
const styleClass = reactive({
  color: "red",
});
const number = ref(0);
let qq = {};
const obj1 = ref({});
const obj2 = reactive({});
//原始对象qq和ref，reactive定义出来的对象new RefImpl,new Proxy不相等,y因为引用都变了
console.log(qq == obj1.value, qq == obj2, "322122");
</script>

<style scoped>
/* js中的变量可以在css中使用 */
.color {
  color: v-bind("styleClass.color");
}
.btn {
  color: v-bind(color);
}
</style>
